<!-- AppQualification.vue - 教育和工作经历组件 -->
<template>
  <!-- 教育和工作经历区块 -->
  <section class="qualification section">
    <!-- 区块标题，使用i18n国际化 -->
    <h2 class="section__title">
      {{ $t("qualification__title") }}
    </h2>
    <!-- 区块副标题，使用i18n国际化 -->
    <span class="section__subtitle">{{ $t("qualification__subtitle") }}</span>

    <!-- 内容容器 -->
    <div class="container">
      <!-- 切换按钮组 -->
      <div class="qualification__tabs">
        <!-- 教育经历按钮 -->
        <div :class="[curSeleced === 'education' ? 'qualification__button--active' : '']"
          class="qualification__button button--flex" @click="curSeleced='education'">
          <i class="alicon alicon-graduation qualification__icon"></i>
          <span>{{ $t("education") }}</span>
        </div>

        <!-- 工作经历按钮 -->
        <div :class="[curSeleced === 'work' ? 'qualification__button--active' : '']"
          class="qualification__button button--flex" @click="curSeleced = 'work'">
          <i class="alicon alicon-brief-bag qualification__icon"></i>
          <span>{{ $t("work") }}</span>
        </div>
      </div>

      <!-- 内容展示区域 -->
      <div class="qualification__sections">
        <!-- 教育经历内容 -->
        <div id="education" v-show="curSeleced === 'education'">
          <TheQualificationItemVue :list="educationList"></TheQualificationItemVue>
        </div>

        <!-- 工作经历内容 -->
        <div class="qualification__content" v-show="curSeleced === 'work'">
          <TheQualificationItemVue :list="workList"></TheQualificationItemVue>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
// 导入Vue响应式API和子组件
import { ref } from 'vue'
import TheQualificationItemVue from './TheQualificationItem.vue'

export default {
  name: 'AppQualification',
  components: {
    TheQualificationItemVue 
  },
  setup() {
    // 当前选中的标签（教育/工作）
    const curSeleced = ref('education')
    
    // 教育经历列表数据
    const educationList = ref([
      {
        title: 'qualification1__title',
        describe: 'qualification1__describe',
        time: '2012.9-2015.6'
      },
      {
        title: 'qualification2__title',
        describe: 'qualification2__describe',
        time: '2009.9-2012.6'
      },
    ])

    // 工作经历列表数据
    const workList = ref([
      {
        title: 'qualification3__title',
        describe: 'qualification3__describe',
        time: '2023.8-2024.7'
      },
      {
        title: 'qualification4__title',
        describe: 'qualification4__describe',
        time: '2019.8-2023.7'
      },
      {
        title: 'qualification5__title',
        describe: 'qualification5__describe',
        time: '2016.8-2019.8'
      }
      
    ])
    
    return { curSeleced, educationList, workList }
  },
}
</script>

<style lang="scss" scoped>
/* 教育和工作经历样式 */
.qualification {
  /* 切换按钮组样式 */
  &__tabs {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: var(--mb-2);
    /* 桌面设备布局调整 */
    @include min-screen(768px) {
      justify-content: center;
    }
  }

  /* 切换按钮样式 */
  &__button {
    font-size: var(--h3-font-size);
    font-weight: var(--font-medium);
    cursor: pointer;
    &:hover {
      color: var(--first-color);
    }
    /* 激活状态样式 */
    &--active {
      color: var(--first-color);
    }
    /* 桌面设备间距调整 */
    @include min-screen(768px) {
      margin: 0 var(--mb-1);
    }
  }

  /* 按钮图标样式 */
  &__icon {
    font-size: 1.8rem;
    margin-right: var(--mb-0-25);
  }

  /* 内容区域样式 */
  &__sections {
    /* 平板设备网格布局 */
    @include min-screen(568px) {
      display: grid;
      grid-template-columns: 0.6fr;
      justify-content: center;
    }
    /* 桌面设备宽度调整 */
    @include min-screen(768px) {
      grid-template-columns: 0.5fr;
    }
  }
}

/* 全局标题样式美化 */
.section__title {
  font-size: var(--h1-font-size);
  color: var(--title-color);
  text-align: center;
  margin-bottom: var(--mb-1);
  font-weight: var(--font-semi-bold);
  position: relative;
  padding-bottom: 0.5rem;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: var(--first-color);
    border-radius: 2px;
  }
}

.section__subtitle {
  display: block;
  font-size: var(--small-font-size);
  margin-bottom: var(--mb-3);
  text-align: center;
  color: var(--text-color-light);
}
</style>